<nz-modal [(nzVisible)]="isVisible" [nzWidth]="modalWidth" (nzOnCancel)="onBack()" [nzStyle]="{'top': '50px'}">
  <div *nzModalTitle>{{ title }}</div>
  <ng-container *nzModalContent>
    <form [formGroup]="chargeForm">
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="buildingName">楼栋名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="buildingName" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="roomNumber">单元房号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="roomNumber" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="chargeType">收费类型</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="chargeType">
                <nz-option nzLabel="物业费" [nzValue]="10"></nz-option>
                <nz-option nzLabel="水费" [nzValue]="20"></nz-option>
                <nz-option nzLabel="电费" [nzValue]="30"></nz-option>
                <nz-option nzLabel="煤气费" [nzValue]="40"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="billingCycle">收费周期类型</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="billingCycle" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="billingStartDate">收费周期开始时间</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="billingStartDate" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="billingEndDate">收费周期结束时间</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="billingEndDate" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="amount">金额</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="amount" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="lateFee">滞纳金金额</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="lateFee" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="dueDate">应付截止日期</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="dueDate" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="paymentDate">实际支付日期</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="paymentDate" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="paymentStatus">支付状态</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="paymentStatus">
                <nz-option nzLabel="未支付" [nzValue]="10"></nz-option>
                <nz-option nzLabel="已支付" [nzValue]="20"></nz-option>
                <nz-option nzLabel="已作废" [nzValue]="90"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="createTime">创建时间</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="createTime" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="modifyTime">最后修改时间</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="modifyTime" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
    </form>
  </ng-container>
  <div *nzModalFooter>
    <div class="form-button-container">
      <button nz-button nzType="default" (click)="onBack()">关闭</button>
    </div>
  </div>
</nz-modal>
